import { getProfile } from "@/api/modules/model/profile";
import { getSchema } from "@/api/modules/model/schema";
import { SchemaItem } from "@/components/JsonForm/interface";
import BasicInfo from "../../../components/Sansan/Model/components/BasicInfo";
import Navigation from "../../../components/Sansan/Model/device/Navigation";
import SensorForm from "../../../components/Sansan/Model/components/SensorForm";

import SimpleInfo from "../../../components/Sansan/Model/device/SimpleInfo";
import { SchemaNodeKey } from "@/utils/constants";
import SensorList from "@/components/Sansan/Model/device/SensorList";
import FuncList from "@/components/Sansan/Model/device/FuncList";
export default defineComponent({
	setup() {
		const schemaInfo = ref<SchemaItem>({});
		const prifileInfo = ref({});
		const currNav = ref<string>("");
		provide(SchemaNodeKey.schema, schemaInfo);
		provide(SchemaNodeKey.profile, prifileInfo);
		onMounted(async () => {
			const res = await getSchema();
			schemaInfo.value = res.result.schema;

			const profileRes = await getProfile();
			prifileInfo.value = profileRes.result;
		});

		const changeNav = (nav: string) => {
			currNav.value = nav;
		};
		return () => {
			return (
				<div>
					{Object.keys(schemaInfo.value).length ? (
						<>
							<div class="mb-4 p-4 bg-white">
								<SimpleInfo />
							</div>
							<Navigation schema={schemaInfo.value} onChange={val => changeNav(val)} />
							<div class="bg-white p-8">
								{currNav.value == SchemaNodeKey.basic ? <BasicInfo schema={schemaInfo.value} profile={prifileInfo.value} /> : ""}
								{currNav.value == SchemaNodeKey.config ? (
									<SensorList schema={schemaInfo.value} profile={prifileInfo.value} />
								) : (
									""
								)}
								{currNav.value == SchemaNodeKey.funcs ? <FuncList schema={schemaInfo.value} profile={prifileInfo.value} /> : ""}
							</div>
							<div class="bg-white mt-4 p-8">
								<SensorForm />
							</div>
						</>
					) : (
						""
					)}
				</div>
			);
		};
	}
});
